<template>
  <div>
    <div style="display: flex;justify-content: space-between;color: white;height: 40px;align-items: center;">
      <div style="font-size: 20px;cursor:pointer;" @click="gotoIndex">
        全流程智能化审判监督平台
      </div>
      <div style="display: flex;align-content: center;font-size: 15px;align-items: center;">
        <span style="margin-right: 10px;padding-bottom: 1px;font-size: 15px;">用户名：{{ login.userName }}</span>
        <!--         <div v-show="!selectVisible" @click="toggleSelect">-->
        <span>角色：</span>
        <!--         </div>-->

        <div>
          <el-select v-model="roleName" style="width: 100px;"  placeholder="请选择" @change="changeRole">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>

        <!--        <div  v-show="!selectVisible"  @click="toggleSelect">-->
        <!--          <el-icon  class="el-icon-arrow-down" style="font-size: 20px;margin-right: 20px;"></el-icon>-->
        <!--        </div>-->
        <div v-if="currentPath!='menu'" style="width: 22px;height: 22px;">
          <img style="width: 100%;height: 100%;" src="@/assets/logout.png" @click="toIndex">
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import {detail} from "@/api/userApi";

export default {
  data() {
    return {
      roleName: '/index_yz',

      login: {
        userName: '',
        position: ''
      },
      now: new Date(),
      timer: null,
      selectVisible: false,
      options: [
        {value: '/index_yz', label: '院长'},
        {value: '/index_sgb', label: '审管办'},
        {value: '/index_jjz', label: '纪检组'},
        {value: '/index_dcs', label: '督察组'}
      ]
    }
  },
  computed: {
    currentPath() {
      return this.$route.path.replaceAll("/", ""); // 获取当前路由的path
    },
    formattedDateTime() {
      const {now} = this;
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);

      return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
    }
  },
  mounted() {
    this.getUserDetail()

    this.timer = setInterval(() => {
      this.now = new Date();
    }, 1000);


  },
  methods: {
    changeRole(e) {
      console.log(e)
      this.$router.replace({path: e});
    },
    toggleSelect() {
      this.selectVisible = !this.selectVisible;
    },
    gotoIndex() {
      this.$router.push({path: '/index_yz'});
    },
    getUserDetail() {
      const self = this
      const obj = {}
      obj.id = this.$globalUserId
      detail(obj).then(data => {
        if (data.code == 200) {
          self.login = data.data

        } else {
          self.$message.error(data.msg);
        }
      })
    },
    toIndex() {
      this.$router.push({path: '/'});
    },
    backMenu() {
      if (this.currentPath != 'menu') {
        this.$router.push({path: '/menu-v1'});
      }
    }
  }
};
</script>
<style scoped>
/deep/ .el-input__inner {
  color: #fff;
}

.top-div-left-title {
  float: left;
  width: 500px;
  height: 46px;
  margin-left: 10px;
}

.top-div-left-title span {
  font-size: 22px;
  color: #ffffff;
  font-weight: 500;
}

.top-div-right-title {
  float: right;
  height: 56px;
  margin-right: 20px;
}

.top-div-right-title span {
  font-size: 22px;
  color: #ffffff;
  font-weight: 500;
}

.top-div-right-img {
  float: right;
  height: 46px;
  margin-right: 10px;
  line-height: 36px;
  margin-top: 10px;
}

img {
  height: 36px;
  width: 36px;
  cursor: pointer;
}

/deep/ .el-input__inner {
  background: #006cd0;
  border: none;
}
</style>